<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客发布</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <!--    引入editor.md-编译器css-->
    <link rel="stylesheet" href="/lib/editormd/css/editormd.min.css"/>
    <link rel="stylesheet" href="/lib/animate/animate.min.css">
    <link rel="stylesheet" href="/css/me.css">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body class="m-back-img5">
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small animated fadeInDown m-opacity"
     style="z-index: 99 !important;">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui teal header item">后台管理</h2>
            <a href="/" class=" nav_item item m-mobile-hide"><i class="coffee icon"></i>博客首页</a>
            <a href="/back/index.html" class=" nav_item item m-mobile-hide "><i class="home icon"></i>管理首页</a>
            <a href="/back/blogs.html" class=" nav_item item m-mobile-hide"><i class="book icon"></i>博客</a>
            <a href="/back/types.html" class="nav_item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="/back/tags.html" class="nav_item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <div class="nav_item right dropdown  menu m-mobile-hide">
                <div class="ui dropdown item">
                    <div class="text">
                        <img id="avatar" class="ui avatar image" src="/images/avatar/zry.jpg" alt="">
                        <span id="nickname">猫喵喵</span>
                    </div>

                    <i class="dropdown icon"></i>
                    <div class="menu element-ui dialog" style="z-index: 999 !important;">
                        <a href="/back/user.html" class="item">个人信息</a>
                        <a onclick="logout()" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </a>
</nav>

<div class="m-padded-tb-4em  m-container-best">
    <div class="ui container">
        <form id="blog-form" action="/admin/blog" method="post" class="ui form">
            <!--            隐含域 published-->
            <input type="hidden" name="published">
            <input type="hidden" name="blogId">
            <!--幂等性校验-->
            <!--            <input type="hidden"value="${newDiaryToken}" name = "token">-->
            <div class="required field m-opacity-not">
                <div class=" ui left labeled input">
                    <div class="ui selection compact teal basic dropdown label">
                        <input id="flag" type="hidden" value="原创" name="flag">
                        <i class="dropdown icon"></i>
                        <div class="flag text">原创</div>
                        <div class="m-opacity-not menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="翻译">翻译</div>
                        </div>
                    </div>

                    <input id="title" type="text" name="title" placeholder="标题">

                </div>

            </div>
            <div class="field">
                <!--       叠放层次 放在最上面-->
                <div id="md-content" style="z-index: 1 !important;">
                    <textarea id="content" placeholder="博客内容" name="content" style="display:none;"></textarea>
                </div>
            </div>
            <div class="two fields">
                <div class="required field">
                    <div class="ui left active labeled input">
                        <label class="ui compact teal basic label">分类</label>
                        <div class="ui fluid selection dropdown">
                            <input type="hidden" name="type.id">
                            <i class="dropdown icon"></i>
                            <div class="default type text">分类</div>
                            <div id="typeContent" class="menu">
                                <!--                                                                <div th:each="type :${types}" class="item" data-value="1"-->
                                <!--                                                                     th:text="${type.name}">错误日志-->
                                <!--                                                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="ui left active labeled  input">
                        <label class="ui compact teal basic label">标签</label>
                        <div class="ui fluid multiple search selection dropdown">
                            <input type="hidden" name="tagIds">
                            <i class="dropdown icon"></i>
                            <div id="tagText"></div>
                            <div class="default tag text">标签</div>
                            <div id="tagContent" class="menu">
                                <!--                                <div class="item" data-value="1" >java</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inline fields">
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" checked id="recommend"
                               name="recommend"
                               class="hidden">
                        <label for="recommend">推荐</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" checked id="shareStatement" name="shareStatement"
                               class="hidden">
                        <label for="shareStatement">转载声明</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="appreciation" name="appreciation"
                               class="hidden">
                        <label for="appreciation">赞赏</label>
                    </div>
                </div>

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" checked id="commentable" name="commentable"
                               class="hidden">
                        <label for="commentable">评论</label>
                    </div>
                </div>
            </div>
            <div class="required field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">首图</label>
                    <input type="text" name="firstPicture"
                           placeholder="首图引用地址 https://tenapi.cn/v2/acg">
                </div>
                <span class="m-text" style="background-color: whitesmoke;">首图参考: <a href="https://tenapi.cn/v2/acg"
                                                                                    target="_blank">https://tenapi.cn/v2/acg</a></span>
            </div>
            <div class="required field">
                <textarea name="description" placeholder="博客描述..."
                          maxlength="100"></textarea>
            </div>
            <div class="ui error message"></div>
            <div class="ui right aligned container">
                <!--返回上一页面-->
                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                <button type="button" id="save-btn" class="ui secondary button">保存</button>
                <button type="button" id="publish-btn" class="ui teal button">发布</button>
            </div>
        </form>
    </div>
</div>
<br>
<br>
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../images/weixin.png"
                             class="ui rounded image" alt="" width="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：123456@qq.com</a>
                    <a href="#" class="item">QQ:123456789</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021-2022 . All rights reserved.</p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode="
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                    src="https://beian.mps.gov.cn/favicon.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">京ICP备
                    XXXXXXXXXX号</p></a>
        </div>
    </div>

</footer>
</body>
<!-- jquery -->
<script src="/js/jquery-3.6.0.min.js"></script>
<!-- semantic-ui-->
<script type="text/javascript" src="/lib/semantic/semantic.min.js"></script>
<!-- layer -->
<script type="text/javascript" src="/lib/layer/layer.js"></script>
<!--editormd-->
<script type="text/javascript" src="/lib/editormd/editormd.min.js"></script>
<!--comment.js-->
<script type="text/javascript" src="/js/common.js"></script>
<!--blog.js-->
<script type="text/javascript" src="/js/blogInput.js"></script>
<script type="text/javascript">

    $(".ui.dropdown").dropdown({
        on: "hover"
    });


    $(function () {
        getUserInfo();
        init();
        //博客页面初始化
        //初始化editormd编辑器
        editormd("md-content", {

            width: "100%",
            height: 640,
            syncScrolling: "single",
            // path: "[[@{/lib/editormd/lib/}]]"
            path: "/lib/editormd/lib/",

            // theme : "dark",
            previewTheme: "lesser-dark",
            editorTheme: editormd.editorThemes['dark'],
            pageBreak: true,
        });
    });

    function init() {
        let id = g_getQueryString("blogId");
        if (id != null && id.length != 0) {
            $('[name="blogId"]').val(id);
            setEditBlog(id);
        }
        setTypesAndTags();
    }

    function setEditBlog(id) {
        $.ajax({
            url: "/blogs/" + id,
            type: "GET",
            async: false,
            success: function (result) {
                if (result.code === 200) {
                    setBlog(result.data);
                }
                layer.msg(result.msg);
            },
            error: function (obj) {
                layer.closeAll();
                layer.log("error，也许您的网络有问题");
            }
        });

        function setBlog(obj) {

            $("#content").text(obj.content);
            $("#content").val(obj.content);
            $('[name="title"]').val(obj.title);

            if (obj.type == null) {
                $('[name="type.id"]').val("");
                $('.type.text').text("");
            } else {
                $('[name="type.id"]').val(obj.type.id);
                $('.type.text').text(obj.type.name);
            }
            $('.type.text').toggleClass("default");

            $('[name="tagIds"]').val(obj.tagIds);
            let tagsText = '';
            $.each(obj.tags, function (index, val) {
                tagsText += '<a class="ui label transition visible" data-value="'
                    + val.id
                    + '"style = "display: inline-block !important;" > '
                    + val.name
                    + '<i class="delete icon"></i></a>';
            });
            $('#tagText').after(tagsText);
            $('[name="firstPicture"]').val(obj.firstPicture);
            $('[name="description"]').val(obj.description);
            $('[name="published"]').val(obj.published);

            $('[name="flag"]').val(obj.flag);
            $(".flag.text").text(obj.flag);

            $('[name="shareStatement"]').prop('checked', obj.shareStatement);
            $('[name="recommend"]').prop('checked', obj.recommend);
            $('[name="appreciation"]').prop('checked', obj.appreciation);
            $('[name="commentable"]').prop('checked', obj.commentable);
        };
    };


    function setTypesAndTags() {
        $.ajax({
            url: "/types",
            type: "GET",
            success: function (result) {
                if (result.code === 200) {
                    var typeContent = "";
                    $.each(result.data, function (index, val) {
                        typeContent +=
                            '<div class="item" data-value="'
                            + val.id
                            + '" text="'
                            + val.name
                            + '"> ' + val.name + '</div>';
                    });
                    $('#typeContent').html(typeContent);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (obj) {
                layer.closeAll();
                layer.log("error，也许您的网络有问题");
            }
        });
        // 获取所有标签
        $.ajax({
            url: "/tags",
            type: "GET",
            success: function (result) {
                if (result.code === 200) {
                    let tagContent = "";
                    $.each(result.data, function (index, val) {
                        tagContent +=
                            '<div class="item" data-value="'
                            + val.id
                            + '" text="'
                            + val.name
                            + '"> ' + val.name + '</div>';
                    });
                    $('#tagContent').html(tagContent);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (obj) {
                layer.closeAll();
                layer.log("error，也许您的网络有问题");
            }
        });
    }

    $("#save-btn").click(function () {
        $('[name="published"]').val(false);
        let id = $('[name="blogId"]').val();
        if (id == null || id.length == 0) {
            postBlog();
        } else {
            updateBlog();
        }
    });
    $("#publish-btn").click(function () {
        $('[name="published"]').val(true);
        $("#publish-btn").attr("disabled", true);
        let id = $('[name="blogId"]').val();
        if (id == null || id.length == 0) {
            postBlog();
        } else {
            updateBlog();
        }
    });

</script>

</html>